<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>

    </style>
</head>
<body>

<div id="app">
    <div>
        <el-input v-model="info.rname" placeholder="请输入角色名称" style="display: inline-block;width: 200px;">
        </el-input>
        <el-select placeholder="角色状态" v-model="info.name">
            <el-option label="" value="">所有</el-option>
            <el-option v-for="(s,i) in stateArr" :label="s.name" :value="s.id"></el-option>
        </el-select>
        <el-button icon="el-icon-search" circle @click="searchData()"></el-button>
        <el-button type="success" icon="el-icon-plus" circle @click="showAddRole()"></el-button>
    </div>

    <el-table
            ref="multipleTable"
            :data="roleArr"
            tooltip-effect="dark"
            style="width: 100%"
    >
        <el-table-column
                prop="id"
                label="角色编号"
                width="120">
        </el-table-column>
        <el-table-column
                prop="rname"
                label="角色名称"
                width="120">
        </el-table-column>
        <el-table-column
                prop="other"
                label="权限描述"
                show-overflow-tooltip>
        </el-table-column>
        <el-table-column
                prop="createDate"
                label="创建日期"
                show-overflow-tooltip>
        </el-table-column>
        <el-table-column
                prop="s.name"
                label="角色状态"
                width="120">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="120">
            <template  slot-scope="scope">
                <el-button type="text" @click="showUpdateRoleDlog(scope.row.id)">修改</el-button>
                <el-button type="text" @click="deleteRole(scope.row.id)">移除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog title="添加角色" :visible.sync="showRoleVisible" width="50%" center>
        <el-form :model="addInfo" :rules="rules" ref="addInfo" label-width="100px" class="demo-ruleForm">
            <el-form-item label="角色名称" prop="rname">
                <el-input v-model="addInfo.rname" placeholder="请输入角色名称"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="state">
                <el-switch v-model="state" active-color="#13ce66" inactive-color="#ff4949" :active-value="0"
                           :inactive-value="1">
                </el-switch>
            </el-form-item>
            <!--<el-form-item label="创建日期" prop="createDate">
                <el-input type="date" v-model="addInfo.createDate">
                </el-input>
            </el-form-item>-->
            <el-form-item label="权限描述" prop="other">
                <el-input v-model="addInfo.other" type="textarea" placeholder="请输入管理员的权限描述"></el-input>
            </el-form-item>
        </el-form>
        <div style="margin: auto 50px;">
            菜单权限：
            <el-tree ref="tree" :data="data" show-checkbox node-key="value" :props="defaultProps" check-strictly="true"></el-tree>
        </div>
        <span slot="footer" class="dialog-footer">
					<el-button @click="showRoleVisible = false">取 消</el-button>
					<el-button type="primary" @click="add()">确 定</el-button>
				</span>
    </el-dialog>

    <el-dialog title="修改角色" :visible.sync="showUpdateRoleVisible" width="50%" center>
        <el-form :model="updateInfo" :rules="rules" ref="updateInfo" label-width="100px" class="demo-ruleForm">
            <el-form-item label="角色名称" prop="rname">
                <el-input v-model="updateInfo.rname" placeholder="请输入角色名称"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="state">
                <el-switch v-model="state" active-color="#13ce66" inactive-color="#ff4949" :active-value="0"
                           :inactive-value="1">
                </el-switch>
            </el-form-item>
           <!-- <el-form-item label="创建日期" prop="createDate">
                <el-input type="date" v-model="updateInfo.createDate">
                </el-input>
            </el-form-item>-->
            <el-form-item label="权限描述" prop="other">
                <el-input v-model="updateInfo.other" type="textarea" placeholder="请输入管理员的权限描述"></el-input>
            </el-form-item>
        </el-form>
        <div style="margin: auto 50px;">
            菜单权限：
            <el-tree ref="tree" :data="data" show-checkbox node-key="value" :default-checked-keys="checkData" :props="defaultProps" check-strictly="true"></el-tree>
        </div>
        <span slot="footer" class="dialog-footer">
					<el-button @click="showUpdateRoleVisible = false">取 消</el-button>
					<el-button type="primary" @click="update()">确 定</el-button>
				</span>
    </el-dialog>
    <el-pagination
            @current-change="handleCurrentChange"
            background
            layout="prev, pager, next"
            :total="pageTotal">
    </el-pagination>

</div>

<script>
    $.get("/cai/role/getState",function (backData) {
        app.stateArr = backData.data;
    });
    $.get("/cai/role/roleList", function(backData) {
        app.data = backData.data;
    })
    var app = new Vue({
        el: "#app",
        data: {
            key:[],
            tableData: [],
            defaultProps: {
                children: 'roleChildren',
                label: 'label'
            },
            state:0,
            data: [],
            info: {},
            roleArr:[],
            pageTotal:0,
            stateArr:[],
            showRoleVisible:false,
            showUpdateRoleVisible:false,
            addInfo:{},
            updateInfo:{},
            checkData:[],
            arr:{},
            rules:{
                rname: [{
                    required: true,
                    message: '请输入姓名',
                    trigger: 'blur'
                },
                    {
                        min: 3,
                        max: 5,
                        message: '长度在 3 到 5 个字符',
                        trigger: 'blur'
                    }
                ],
                createDate: [{
                    required: true,
                    message: '请选择创建时间',
                    trigger: 'blur'
                }]
            }
        },
        methods: {
            searchData: function() {
                getInfo(1, 10);
            },
            handleCurrentChange:function (val) {
                getInfo(val,10);
            },
            deleteRole:function(id){
                if(id == 1){
                    app.$notify.error({
                        title: '错误提示',
                        message: '对不起，超管不能被删除'
                    });
                    return null;
                }
                if(confirm("删除将会永久删除，您确定删除吗？")){
                    $.get("/cai/role/deleteOneRole/"+id,function (backData) {
                        if(backData.code == 1){
                            app.$notify({
                                title: '成功',
                                message: backData.msg,
                                type: 'success'
                            });
                            getInfo(1,10)
                        }else {
                            app.$notify.error({
                                title: '错误提示',
                                message: backData.msg
                            });
                        }
                    });
                }
            },
            showUpdateRoleDlog:function(id){
                if(id == 1){
                    app.$notify.error({
                        title: '错误提示',
                        message: '对不起，超管不能被修改'
                    });
                    return null;
                }
                $.get("/cai/role/getOne/"+id,function (backData) {
                    app.checkData = backData.data.arr;
                    app.state = backData.data.role.state;
                    app.updateInfo = backData.data.role;
                });
                app.showUpdateRoleVisible = true;
                app.$refs["updateInfo"].resetFields();
                app.$refs.tree.setCheckedNodes([]);
            },
            showAddRole:function () {
                app.showRoleVisible = true
                app.$refs["addInfo"].resetFields();
                app.$refs.tree.setCheckedNodes([]);
            },
            update:function(){
                app.updateInfo.state = app.state;
                $.post("/cai/role/updateRole",app.updateInfo,function (backData) {
                    if (backData.code == 1){
                        $.get("/cai/role/deletePerm/"+app.updateInfo.id,function (backData) {
                            if (backData.code == 1){
                                app.arr.rid = app.updateInfo.id;
                                for (var i = 0; i < app.$refs.tree.getCheckedNodes().length; i++) {
                                    app.arr.pid = app.$refs.tree.getCheckedNodes()[i].value;
                                    $.post("/cai/role/addPerm", app.arr, function(backData) {
                                    });
                                }
                                app.$notify({
                                    title: '成功',
                                    message: '修改角色成功',
                                    type: 'success'
                                });
                                app.showUpdateRoleVisible = false;
                                getInfo(1,10);
                            }
                        });
                    }
                });
            },
            add:function () {
                app.$refs["addInfo"].validate((valid) => {
                    if (valid) {
                        app.addInfo.state = app.state;
                        $.post("/cai/role/add", app.addInfo, function(backData) {
                            app.arr.rid = backData.data;
                            if (backData.code == 1){
                                for (var i = 0; i < app.$refs.tree.getCheckedNodes().length; i++) {
                                    app.arr.pid = app.$refs.tree.getCheckedNodes()[i].value;
                                    $.post("/cai/role/addPerm", app.arr, function(backData) {

                                    });
                                }
                                app.$notify({
                                    title: '成功',
                                    message: '添加角色成功',
                                    type: 'success'
                                });
                                app.showRoleVisible = false;
                                getInfo(1,10);
                            }
                        })
                    }
                });
            }
        }
    });
    //a页码 b 数量
    function getInfo(a, b) {
        app.info.pageNo = a;
        app.info.pageCount = b;
        $.post("/cai/role/list", app.info, function(backData) {
            app.roleArr = backData.data.currentPageData;
            app.pageTotal = backData.data.currentDataTotal;
        });
    }
    getInfo(1, 10);

</script>
</body>
</html>
